<template>
  <el-card style="width: 100%">
    <el-button>修改Nginx配置</el-button>
    <el-button>重启Nginx</el-button>
    <el-button @Click="refush()">刷新</el-button>
  </el-card>
  <el-card style="width: 100%">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="服务名称" min-width="150" width="200" />
      <el-table-column prop="status" label="服务状态" width="120" />
      <el-table-column prop="port" label="端口号" width="120" />
      <el-table-column prop="webAddress" label="web地址" width="200" />
      <el-table-column prop="pathAddress" label="目录地址" width="120" />
      <el-table-column prop="gitAddress" label="GIT地址" width="400" />
      <el-table-column fixed="right" label="操作" min-width="120" width="200">
        <template #default="item">
          <div v-show="item.row.status == 0">
            <el-button type="danger" size="small" @Click="deleteweb(item.row.id)">
              下线
            </el-button>
            <el-button type="primary" size="small" @Click="installweb(item.row.id)">
              更新
            </el-button>
          </div>

          <div v-show="item.row.status == 1">
            <el-button type="success" size="small" @Click="installweb(item.row.id)">
              发布
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script setup>

import { onMounted, reactive, ref ,nextTick } from 'vue';
import request from '@/axios/index.js'

let tableData =  ref([]);

//加载列表
function refush(){
  request({
     url: '/server/FrontEnd/list',
     method: 'get',
   }).then(response => {
     alert(JSON.stringify(response.data));
     tableData.value = response.data;
   }).catch(error => {
     alert(error.message)
   })
}

//初始化数据
onMounted(async () => {
 refush();
});


const handleClick = () => {
  console.log('click')
}


function installweb(id) {
  alert('安装');
  request({
    url: '/server/FrontEnd/installweb?id=' + id,
    method: 'get',
  }).then(response => {
    tableData = response.data;
  }).catch(error => {
    alert(error.message)
  })
}

function deleteweb(id) {
  alert('删除');
  //加载列表
  request({
    url: '/server/FrontEnd/deleteweb?id=' + id,
    method: 'get',
  }).then(response => {
    tableData = response.data;
  }).catch(error => {
    alert(error.message)
  })
}

</script>
